<template>
  <div>
    <el-card>
      <div slot="header">
        <h1>商铺数据看板</h1>
      </div>
      <div>
        <el-date-picker
            v-model="selectedDate"
            type="date"
            placeholder="选择日期"
            @change="fetchData"
            style="margin-right: 10px;"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
        />
        <el-button type="primary" @click="fetchData">查询</el-button>
      </div>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="8">
          <el-card>
            <div slot="header">日销售单数</div>
            <div>{{ storeView.totalCount }} 单</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header">当前销售总额</div>
            <div>{{ storeView.totalSales }} 元</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header">最受欢迎的菜品</div>
            <div>{{ storeView.popularProduct }}</div>
          </el-card>
        </el-col>
      </el-row>
      <el-card style="margin-top: 20px;">
        <div slot="header">日订单量</div>
        <div ref="salesChart" style="width: 100%; height: 400px;"></div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts';
import moment from 'moment-timezone';
import axios from "axios";

export default {
  data() {
    return {
      selectedDate: '',
      storeView: {},
      popularDish: '',
      chart: null,
      dailyOrderCounts: [],
      orderDates: []
    };
  },created() {
    this.getDailyView();
  },
  methods: {
    getDailyView(){
      axios.get('/meals/storeView/searchDailyStoreView',{
        params: {
          date: this.selectedDate
        }
      }).then(response => {
        if (response.data.code===200){
            this.storeView = response.data.data;
        }else {
          this.$message.error(response.data.msg);
        }
})
    },
    fetchData() {
      if (!this.selectedDate) return;
      // 模拟请求数据
      const response = {
        dailySales: 1200,
        monthlySales: 36000,
        popularDish: "宫保鸡丁",
        dailyOrderCounts: [100, 120, 150, 130, 140, 160, 170],
        orderDates: ["2023-10-01", "2023-10-02", "2023-10-03", "2023-10-04", "2023-10-05", "2023-10-06", "2023-10-07"]
      };
      this.dailySales = response.dailySales;
      this.monthlySales = response.monthlySales;
      this.popularDish = response.popularDish;
      this.dailyOrderCounts = response.dailyOrderCounts;
      this.orderDates = response.orderDates;
      this.renderChart(this.orderDates, this.dailyOrderCounts);
    },
    renderChart(dates, data) {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.salesChart);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: dates,
          axisLabel: {
            rotate: 45,
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          name: '订单量'
        },
        series: [{
          name: '订单量',
          type: 'bar',
          data: data,
          itemStyle: {
            color: '#5470c6'
          }
        }]
      };
      this.chart.setOption(option);

      // 响应式布局
      window.addEventListener('resize', () => {
        this.chart.resize();
      });
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};
</script>

<style scoped>
h1 {
  text-align: center;
  margin-bottom: 20px;
}

.el-date-picker, .el-button {
  vertical-align: middle;
}

.el-card {
  height: 100%;
}

.el-row {
  margin-bottom: 20px;
}
</style>